<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      label-suffix="："
    >
      <el-form-item
        label="编号"
        :rules="[{required: true, message:'请输入司机编号'}]"
      >
        <el-input
          size="small"
          v-model="form.number"
          placeholder="请输入司机编号"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="司机名称"
        prop="username"
        :rules="[{required: true, message: '请输入司机名称'}]"
      >
        <el-input
          size="small"
          v-model="form.username"
          placeholder="请输入司机名称"></el-input>
      </el-form-item>
      <el-form-item
        label="司机账号"
        prop="account"
        :rules="[{required: true, message: '请输入司机账号'}]"
      >
        <el-input
          size="small"
          v-model="form.account"
          placeholder="请输入司机账号"></el-input>
      </el-form-item>
      <el-form-item
        label="手机号码"
        prop="phone"
        :rules="[{required: true, message: '请输入手机号码'}]"
      >
        <el-input
          size="small"
          v-model="form.phone"
          placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item
        label="密码"
        prop="pwd"
        :rules="[{required: !account.id, message: '请输入密码'}]"
      >
        <el-input
          size="small"
          v-model="form.pwd"
          placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        size="small"
        @click="dialogVisible = false"
      >
        取 消
      </el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="ensureEdit"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-07-28
   * @Project: driver
   */
  export default {
    name: "edit"
    , data() {
      return {
        dialogVisible: false
        , account: {}
        , form: {
          number: ''
          , username: ''
          , account: ''
          , phone: ''
        }
        , loading: false
      }
    }
    , computed: {
      url() {
        let driver = this.account
        return driver.id ? '/api/v1/driver/update' : '/api/v1/driver/save'
      }
      , title() {
        let driver = this.account
        return driver.id ? '正在编辑 ' + driver.username : '新增司机'
      }
    }
    , watch: {
      dialogVisible(bool) {
        this.$fn.setTitle(bool ? this.title : '账号管理')
      }
    }
    , mounted() {
      this.init()
    }
    , methods: {
      init() {
        this.$bus.$on('editAccount', account => {
          this.dialogVisible = true
          this.account = account
          Object.keys(this.form).forEach(key => {
            this.form[key] = account[key]
          })
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate()
          })
        })
      }
      , ensureEdit() {
        this.$refs.form.validate(valid => {
          if (!valid) return
          let form = this.$fn.deepClone(this.form)
            , driver = this.account
          if (driver.id) {
            form.id = driver.id
          }
          this.loading = true
          this.$axios.post(this.url, form)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success'
                  , message: '操作成功'
                })
                this.dialogVisible = false
                this.$bus.$emit('updateAccountManageList')
              } else {
                this.$message({
                  type: 'error'
                  , message: '操作失败' + res.msg
                })
              }
            })
            .catch(() => {
              this.$message({
                type: 'error'
                , message: '操作失败，请稍后再试'
              })
            })
            .finally(() => {
              this.loading = false
            })
        })
      }
    }
  }
</script>

<style scoped>

</style>
